<template>
	<view>
		<NavBar :isBack='true' :isRbtn='false' :title='title' @onRight="handRight"></NavBar>
		<view class="earningBj"></view>
		<view class="container">
			<view class="myIntegral">我的积分</view>
			<view class="flex integralNum">
				<view>{{awaitPoint}}</view>
				<view class="integral">积分</view>
				<view class="money">约{{awaitMoney}}元</view>
			</view>
			<view class="withdrawBox">
				<view>提现金额(元)</view>
				<view class="flex center iptMoney">
					<view class="moneyIcon">￥</view>
					<input type="number" placeholder="请输入提现金额" class="ipt" v-model="takeAmount" />
					<view class="allWithdraw" @click="takeAmount=awaitMoney">全部提现</view>
				</view>
				<view class="flex center withdrawList">
					<view>提现至</view>
					<view>收款码账户</view>
				</view>
				<view class="flex center withdrawList" @click="upCode">
					<view>收款码</view>
					<image :src="codeMoney?codeMoney:'../../static/info/addPhoto.png'" class="gathering"></image>
				</view>
				<view class="flex center withdrawList">
					<view>收款账号</view>
					<input type="text" placeholder="请输入收款账户" v-model="tixianka" @blur="tijiaotixian" />
				</view>
				<!-- <view class="applyFor" @click="tijiaotixian">提交提现信息</view> -->
				<view class="applyFor" @click="applyClick">申请提现</view>
			</view>
		</view>
		<alert :popupMask="popupMask" :codeImg="codeImg" :content="content" ref="alert" @close="close"></alert>
	</view>
</template>
<script>
	import NavBar from "../../components/NavBar.vue"
	import alert from '@/components/alert.vue'
	import {
		myIncome,
		askTakeIncome,
		modifyUserPaymentCode,
		huoquyonghu
	} from '../../common/api.js'
	import UploadImageS from '@/utils/upload_image.js'
	export default {
		components: {
			NavBar,
			alert
		},
		data() {
			return {
				title: '提现',
				popupMask: false,
				codeImg: false,
				content: {
					img: require('../../static/index/mistake.png'),
					Text: '未上传收款码',
					type: 1
				},
				awaitPoint: 0,
				awaitMoney: 0,
				takeAmount: '',
				userInfo: {},
				codeMoney: '',
				tixianka: ''
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.userInfo = uni.getStorageSync('userInfo')
			this.codeMoney = uni.getStorageSync('userInfo').paymentCode
			this.tixianka = uni.getStorageSync('userInfo').collectionAccount
			// #endif
			// this.gerenxinxi()
			this.myIncome()
		},
		methods: {
			upCode() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImageS(tempFilePaths, {
							complete: function(res) {
								that.codeMoney = res[0].img_url
								that.tijiaotixian()
								that.modifyUserPaymentCode()
							},
						})
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			modifyUserPaymentCode() {
				modifyUserPaymentCode({
					paymentCodeCover: this.codeMoney,
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.$toast(res.message)
					if (res.success) {
						uni.setStorageSync('userInfo', res.result);
					}
				})
			},
			//获取个人信息
			gerenxinxi() {
				huoquyonghu({
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.codeMoney = res.result.paymentCode
					this.tixianka = res.result.collectionAccount
				})
			},
			// 获取收益   积分
			myIncome() {
				myIncome({
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.awaitPoint = res.result.awaitPoint || 0
					this.awaitMoney = res.result.awaitMoney || 0
				})
			},
			tijiaotixian() {
				if (this.tixianka !== '' || this.codeMoney !== '') {
					modifyUserPaymentCode({
						collectionAccount: this.tixianka,
						paymentCodeCover: this.codeMoney,
						userId: uni.getStorageSync('userInfo').id
					}).then(res => {
						// that.modifyUserPaymentCode()
						uni.setStorageSync('userInfo', res.result);
					})
				} else {
					console.log('空');
				}
			},
			applyClick() {
				askTakeIncome({
					takeAmount: this.takeAmount,
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.$toast(res.message)
					if (res.success) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			close() {
				this.popupMask = false
				this.codeImg = false
			},
		}
	}
</script>
<style scoped>
	.applyFor {
		width: 586rpx;
		height: 86rpx;
		border-radius: 62rpx;
		background: linear-gradient(90deg, #ffc114 0%, #fdba00 100%);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 86rpx;
		text-align: center;
		margin-top: 126rpx;
	}

	.withdrawList {
		justify-content: space-between;
		height: 80rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.allWithdraw {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.iptMoney {
		border-bottom: 2rpx solid #f1f1f1;
	}

	.ipt {
		flex: 1;
	}

	.moneyIcon {
		color: #333333;
		font-size: 72rpx;
		font-weight: 500;
		margin-right: 10rpx;
	}

	.gathering {
		width: 52rpx;
		height: 52rpx;
	}

	.withdrawBox {
		width: 616rpx;
		height: 450rpx;
		border-radius: 32rpx;
		opacity: 1;
		background: #ffffff;
		margin: 56rpx 32rpx;
		padding: 28rpx 32rpx 46rpx 38rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.integralNum {
		color: #ffffff;
		font-size: 64rpx;
		font-weight: 900;
		padding-left: 80rpx;
		align-items: center;
	}

	.integral {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
		margin: 0 18rpx 0 12rpx;
	}

	.money {
		height: 30rpx;
		border-radius: 20rpx 20rpx 20rpx 0;
		opacity: 1;
		background: #ffffff;
		padding: 4rpx 8rpx;
		color: #fdba02;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 30rpx;
		position: relative;
		top: -30rpx;
	}

	.myIntegral {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
		margin: 120rpx 80rpx 44rpx;
	}

	.container {
		position: absolute;
		top: 40rpx;
		left: 0;
	}

	.earningBj {
		width: 750rpx;
		height: 534rpx;
		background: #d8d8d8;
		background: linear-gradient(90deg, #ffc114 0%, #fdba00 100%);
	}

	.text_title {
		margin-top: 5rpx;
		font-size: 22rpx;
		color: #9a9a9a;
		margin-bottom: 20rpx;
	}
</style>
<style>
	page {
		background: #f7f7f7;
	}
</style>